<template>
	<view class="view-page u-flex u-flex-column">
		<div class="form u-flex-sub">
			<view class="tip">
				<text class="u-error">*</text>
				<text>精准的信息，可以获得更准确的数据分析</text>
			</view>
			<u-form class="form" :model="form">
				<div class="form-box">
					<div class="input-box">
						<u-form-item prop="nickName" borderBottom>
							<view class="u-flex u-flex-y-center" Slot style="width: 100%; padding: 20rpx 32rpx 20rpx 0">
								<view class="label">
									<text class="u-error">*</text>
									昵称
								</view>
								<view class="u-flex-sub"><u-input border="none" v-model="form.nickName" inputAlign="right" type="text" placeholder="请输入昵称" /></view>
							</view>
						</u-form-item>
						<u-form-item prop="phone" borderBottom>
							<view class="u-flex u-flex-y-center" Slot style="width: 100%; padding: 20rpx 32rpx 20rpx 0">
								<view class="label">
									<text class="u-error">*</text>
									联系方式
								</view>
								<view class="u-flex-sub"><u-input border="none" v-model="form.phone" inputAlign="right" type="tel" placeholder="请输入联系方式" /></view>
							</view>
						</u-form-item>
						<u-form-item prop="gender" borderBottom>
							<view class="u-flex u-flex-y-center" Slot style="width: 100%; padding: 20rpx 32rpx 20rpx 0">
								<view class="label">
									<text class="u-error">*</text>
									性别
								</view>
								<view class="u-flex-sub">
									<u-radio-group :iconSize="30" :size="36" v-model="form.gender" placement="row">
										<u-radio
											:customStyle="{ marginLeft: '16px' }"
											v-for="(item, index) in sexList"
											:key="index"
											:label="item.name"
											:name="item.name"
											:labelSize="30"
											:activeColor="themeColor"
										></u-radio>
									</u-radio-group>
								</view>
							</view>
						</u-form-item>
						<u-form-item prop="phone" borderBottom>
							<view class="u-flex u-flex-y-center" Slot style="width: 100%; padding: 20rpx 32rpx 20rpx 0" @tap="show = true">
								<view class="label">
									<text class="u-error">*</text>
									出生日期
								</view>
								<view class="u-flex-sub"><u-input border="none" readonly v-model="form.birth" inputAlign="right" type="text" placeholder="请选择出生日期" /></view>
								<u-icon slot="right" name="arrow-right"></u-icon>
							</view>
						</u-form-item>
					</div>
				</div>
				<div class="form-box">
					<div class="input-box">
						<u-form-item prop="height" borderBottom>
							<view class="u-flex u-flex-y-center" Slot style="width: 100%; padding: 20rpx 32rpx 20rpx 0" @tap="showHeight = true">
								<view class="label">身高</view>
								<view class="u-flex-sub u-flex align-center justify-end">
									<u-input border="none" readonly v-model="form.height" inputAlign="right" type="text" placeholder="请选择身高用于计算体脂率" />
									<text class="margin-left">cm</text>
								</view>
								<u-icon slot="right" name="arrow-right"></u-icon>
							</view>
						</u-form-item>
						<u-form-item prop="weight" borderBottom>
							<view class="u-flex u-flex-y-center" Slot style="width: 100%; padding: 20rpx 32rpx 20rpx 0" @tap="showWeight = true">
								<view class="label">当前体重</view>
								<view class="u-flex-sub u-flex align-center justify-end">
									<u-input border="none" readonly v-model="form.weight" inputAlign="right" type="text" placeholder="请选择当前体重" />
									<text class="margin-left">kg</text>
								</view>
								<u-icon slot="right" name="arrow-right"></u-icon>
							</view>
						</u-form-item>
					</div>
				</div>
				<div class="form-box">
					<div class="input-box">
						<u-form-item prop="height" borderBottom>
							<view class="u-flex u-flex-y-center" Slot style="width: 100%; padding: 20rpx 32rpx 20rpx 0">
								<view class="label">家庭住址</view>
								<view class="u-flex-sub u-flex align-center justify-end">
									<u-input border="none"  v-model="form.address" inputAlign="right" type="text" placeholder="请输入家庭住址" />
								</view>
							</view>
						</u-form-item>
					</div>
				</div>
			</u-form>
		</div>
		<view class="footerBar">
			<view class="loginBtn">
				<u-button type="primary" :loading="loading" text="保存" shape="circle" @tap="submit"></u-button>
			</view>
		</view>
		<u-datetime-picker
			:show="show"
			@close="show = false"
			@cancel="show = false"
			@confirm="confirmBirth"
			v-model="birth"
			mode="date"
			:minDate="minDate"
			:itemHeight="68"
			:visibleItemCount="5"
			:confirmColor="themeColor"
		></u-datetime-picker>
		<!-- 身高 -->
		<u-picker
			@close="showHeight = false"
			@cancel="showHeight = false"
			@confirm="confirmHeight"
			:show="showHeight"
			:itemHeight="68"
			:visibleItemCount="5"
			:columns="columns"
			:immediateChange="true"
			:defaultIndex="[110]"
		></u-picker>
		<!-- 体重-->
		<u-picker
			@close="showWeight = false"
			@cancel="showWeight = false"
			@confirm="confirmWeight"
			:show="showWeight"
			:itemHeight="68"
			:visibleItemCount="5"
			:columns="columnsWeight"
			:immediateChange="true"
			:defaultIndex="[20, 0, 0]"
		></u-picker>
		<!-- 亲子关系-->
		<u-picker
			@close="showPatriRelation = false"
			@cancel="showPatriRelation = false"
			@confirm="confirmPatriRelation"
			:show="showPatriRelation"
			:itemHeight="68"
			:visibleItemCount="5"
			:columns="relationList"
			:immediateChange="true"
		></u-picker>
	</view>
</template>

<script>
import md5Libs from '@/utils/md5.js';
import { mapState, mapActions, mapMutations } from 'vuex';
export default {
	components: {},
	data() {
		return {
			form: {
				gender: '男',
				nickName: '',
				birth: '',
				weight: '',
				height: '',
				patriRelationCode: '',
				patriRelationName: '',
				phone: '',
				address: ''
			},
			birth: Number(new Date('1960-01-01')),
			sexList: [
				{
					name: '男',
					value: 0
				},
				{
					name: '女',
					value: 1
				}
			],
			show: false,
			minDate: Number(new Date('1900-01-01')),
			showHeight: false,
			columns: [],
			showWeight: false,
			columnsWeight: [[], [], []],
			showPatriRelation: false,
			relationList: [], //亲子关系
			detailId: ''
		};
	},
	onLoad(options) {
		this.detailId = options.detailId || '';
		if (options.detailId) {
			this.getAccountUser(options.detailId);
		}
	},
	computed: {
		...mapState(['userInfo'])
	},
	created() {
		let heightList = [];
		for (var i = 50; i <= 226; i++) {
			heightList.push({
				value: i,
				text: i + 'cm'
			});
		}
		this.columns = [heightList];
		let columnsWeight = [
			[],
			[],
			[
				{
					value: 'kg',
					text: 'kg'
				}
			]
		];
		for (var i = 30; i <= 150; i++) {
			columnsWeight[0].push({
				value: i,
				text: i
			});
		}
		for (var i = 0; i <= 9; i++) {
			columnsWeight[1].push({
				value: i,
				text: '.' + i
			});
		}
		console.log('columnsWeight', columnsWeight);
		this.columnsWeight = columnsWeight;
		this.getDictItemKeyList(['PATRI_RELATION']);
	},
	methods: {
		confirmBirth(e) {
			console.log('e', e, this.$u.timeFormat(e.value, 'yyyy-mm-dd'));
			this.form.birth = this.$u.timeFormat(e.value, 'yyyy-mm-dd');
			this.show = false;
		},
		confirmHeight(e) {
			this.form.height = this.columns[0][e.indexs[0]].value;
			this.showHeight = false;
		},
		confirmWeight(e) {
			let weight = '';
			for (var i = 0; i < e.indexs.length - 1; i++) {
				weight += this.columnsWeight[i][e.indexs[i]].text;
			}
			this.form.weight = weight;
			this.showWeight = false;
		},
		confirmPatriRelation(e) {
			this.form.patriRelationCode = this.relationList[0][e.indexs[0]].value;
			this.form.patriRelationName = this.relationList[0][e.indexs[0]].text;
			this.showPatriRelation = false;
		},
		//查询亲子关系
		getDictItemKeyList(keys) {
			var param = keys;
			this.$postAction(this.$api.getDictItemKeyList, param).then(res => {
				this.relationList = [
					res.PATRI_RELATION.map((item, index) => {
						return {
							value: item.itemCode,
							text: item.itemName
						};
					})
				];
			});
		},
		getAccountUser(detailId) {
			this.$postAction(this.$api.getAccountUserList, {
				detailId
			}).then(res => {
				if (res && res.length > 0) {
					for (var key in this.form) {
						if (key == 'birth') {
							this.form[key] = res[0][key].slice(0, 11);
						} else {
							this.form[key] = res[0][key];
						}
					}
				}
			});
		},
		submit() {
			if (!this.form.nickName || !this.form.nickName.trim()) {
				uni.showToast({
					title: '请输入昵称',
					icon: 'none'
				});
				return;
			}
			if (!this.form.birth || !this.form.birth.trim()) {
				uni.showToast({
					title: '请选择出生日期',
					icon: 'none'
				});
				return;
			}
			let { birth, ...paramter } = this.form;
			let param = {
				...paramter,
				birth: new Date(birth).getTime(),
				userId: this.userInfo.userId
			};
			if (this.detailId) {
				param.detailId = this.detailId;
			}
			this.$postAction(this.detailId ? this.$api.editAccountUser : this.$api.addAccountUser, param).then(da => {
				console.log('da', da);
				uni.showToast({
					title: this.detailId ? '编辑成功' : '添加成功',
					icon: 'none'
				});
				setTimeout(() => {
					if (this.$u.pages().length > 1) {
						this.$Router.back();
					} else {
						this.$Router.replaceAll({
							path: '/pages/index/index'
						});
					}
				}, 500);
			});
		}
	}
};
</script>
<style>
page {
	overflow-y: auto;
	background: #f7f7fc;
}
</style>
<style lang="scss" scoped>
page,
.view-page {
	height: 100%;
	width: 100%;
	background: #f7f7fc;

	.tip {
		padding-left: 30rpx;
		line-height: 40rpx;
		margin-top: 30rpx;
		font-size: 30rpx;
	}
}

.form-box {
	margin: 30upx 0;

	/deep/ .u-radio-group--row {
		justify-content: flex-end;
	}
}

.footerBar {
	width: 580upx;
	margin: 50upx auto 0;
	padding-bottom: calc(20upx + env(safe-area-inset-bottom) / 2);
}

/deep/.form {
	overflow: auto;
	height: calc(100vh - 140upx);

	.placeholder {
		color: #c5c5c5;
	}

	.u-border-bottom {
		border: 1rpx #f8f8f8 solid;
	}

	.uni-input-input {
		color: #1b0a1c;
	}

	.u-textarea {
		padding: 0 9px !important;
	}

	.input-bg {
		.uni-input-wrapper,
		input,
		.u-input__content__field-wrapper__field {
			background: #fbfbfb;
			text-align: right;
		}
	}

	.input-box {
		background: #fff;
		padding-left: 32upx;
		position: relative;

		.close {
			position: absolute;
			top: 0;
			right: 0;
			background-color: rgba(255, 0, 0, 0.9);
			height: 24px;
			width: 24px;
			display: flex;
			flex-direction: row;
			border-bottom-left-radius: 100px;
			align-items: center;
			justify-content: center;
			z-index: 3;
		}

		& + .input-box {
			// margin-top: 16upx;
		}

		input {
			text-align: right;
		}

		.label {
			font-size: 30upx;
			font-weight: 500;
			color: #1b0a1c;
			width: 235upx;
			display: block;
		}
	}
}
</style>
